{% extends "base.html" %}

{% block title %}图文转换 - 智慧课堂分析系统{% endblock %}

{% block content %}
<h2>图文转换</h2>
<p>上传课堂图片，系统将自动识别并转换为文本内容</p>

<div class="upload-area">
    <form id="imageForm" enctype="multipart/form-data">
        <input type="file" id="imageUpload" name="image" accept="image/*" style="display: none;">
        <label for="imageUpload" class="file-label" style="cursor: pointer;">
            <h3>点击选择图片文件或拖拽到此区域</h3>
            <p>支持格式: JPG, PNG, BMP | 最大文件大小: 16MB</p>
        </label>
        <div style="margin-top: 1rem;">
            <button type="submit" class="btn">开始转换</button>
        </div>
    </form>
</div>

<div class="loading">
    <div class="spinner"></div>
    <p>正在识别图片内容... 请稍候</p>
</div>

<div class="result-area" style="display: none;">
    <!-- 转换结果将在这里显示 -->
</div>

<script>
document.getElementById('imageForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    showLoading();
    
    fetch('{{ url_for("image_text.convert_image") }}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        hideLoading();
        if (data.error) {
            showError(data.error);
        } else {
            showResult(`
                <h3>识别结果</h3>
                <div style="margin: 1rem 0;">
                    <h4>识别置信度: ${data.confidence}</h4>
                </div>
                <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 5px; margin: 1rem 0;">
                    <h4>提取的文本内容:</h4>
                    <pre style="white-space: pre-wrap; font-family: inherit; margin: 1rem 0;">${data.text}</pre>
                </div>
                <div>
                    <h4>关键知识点:</h4>
                    <ul>
                        ${data.key_points.map(point => `<li>${point}</li>`).join('')}
                    </ul>
                </div>
            `);
        }
    })
    .catch(error => {
        hideLoading();
        showError('转换过程中发生错误: ' + error.message);
    });
});
</script>
{% endblock %}